// eslint-disable-next-line no-use-before-define
import React, { Suspense, lazy } from 'react'
import { Router, Redirect, Route, Switch } from 'react-router-dom'
// HashRouter as
// import Layout from '@/pages/Layout/Layout.jsx'
// import Login from '@/pages/Login/Login.jsx'
// import NotFound from '@/pages/NotFound/NotFound.jsx'
import history from '@/utils/history'
// import { hasToken } from '@/utils/storage'
import ProviteRoute from '@/components/ProviteRoute'
const Login = lazy(() => import('@/pages/Login/Login.jsx'))
const Layout = lazy(() => import('@/pages/Layout/Layout.jsx'))
const NotFound = lazy(() => import('@/pages/NotFound/NotFound.jsx'))
export default function App () {
  return (
    <div className='app'>
      <Router history={history}>
        <Suspense fallback={() => (<div
          style={{
            textAlign: 'center',
            marginTop: 200
          }}
        >
          loading...
        </div>)}>
          <Switch>
            <Redirect from='/' to='/home' exact></Redirect>
            {/* 匹配到/home之后 ----> 判断有无token ----> 渲染layout组件 */}
            {/* <Route path="/home" render={() => {
            if (hasToken()) { return <Layout></Layout> } else {
              return <Redirect to='/login'></Redirect>
            }
          }} /> */}
            <ProviteRoute path="/home" component={Layout}></ProviteRoute>
            <Route path="/login" component={Login} />
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}
